<template>
  <div class="app-container">

    <el-row>
      <el-col :span="14" name="左侧：收款对账单+收款结算单" id="leftCol">

        <el-card class="box-card" style="margin-right: 5px ; margin-bottom: 5px">
          <!--el-card 头部-->
          <div slot="header" class="clearfix">
            <span style="font-size: 18px; color: rgb(31, 173, 229)">收款对账单列表</span>
            <span
              style="float: right; font-size: 12px; color: rgb(31, 173, 229)">①复核对账  >  ②确认对账  >  ③进行结算</span>
          </div>
          <!--el-card 主体-->
          <collectionStatementList name="收款对账单List"
                                   @statementListRowClick="handleStatementListRowClick"
                                   @refreshCollectionSettlementList="handleRefreshCollectionSettlementList"
                                   @resetQuery="resetSelectedRow"
          ></collectionStatementList>
        </el-card>


      </el-col>

      <el-col :span="10" name="右侧：收款明细" id="rightCol">
        <el-card class="box-card" id="collectionListCard"
                 :style="`position: absolute; overflow: auto;width:${rightColWidth}px`">
          <!--el-card 头部-->
          <div slot="header" class="clearfix" name="右侧-收款List-card标题">
            <!--如果selectedComponent为collectionStatementList,则显示"收款对账单明细:selectedRow.statementNo"-->
            <!--如果selectedComponent为collectionSettlementList,则显示"收款结算单明细:selectedRow.settlementNo"-->
            <!--如果selectedComponent为空，则显示提示信息"在左侧点击一条对账单或结算单以查看明细"-->
            <span v-if="selectedComponentName === 'collectionStatementList'"
                  style="font-size: 18px; color: rgb(31, 173, 229)">收款-对账单明细:{{ selectedRow.statementNo }}</span>
            <span v-else-if="selectedComponentName === 'collectionSettlementList'"
                  style="font-size: 18px; color: rgb(31, 173, 229)">收款-结算单明细:{{
                selectedRow.settlementNo
              }}</span>
            <span v-else style="font-size: 18px; color: rgb(31, 173, 229)">在左侧点击一条对账单或结算单以查看明细</span>
          </div>

          <div name="开发信息提示JSON" v-if="isInDevMode">
            selectedComponentName: {{ selectedComponentName }}
            <hr>
            selectedRow: {{ selectedRow }}
            <hr>
            collectionList[0]: {{ collectionList[0] }}
            <hr>
          </div>


          <!--el-card 主体-->
          <!--收款列表 组件-->
          <collection-list-table
            :collection-list="collectionList"
            :collectionListLoading="collectionListLoading"
          ></collection-list-table>


        </el-card>

      </el-col>
    </el-row>

  </div>
</template>

<script>
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import collectionStatementList from "@/views/statement/collectionStatementList.vue";
import collectionListTable from "@/views/statement/collectionListTable.vue";
import {
  listCollectionBySettlementId,
  listCollectionByStatementId,
  listVBCollectionByStatementId,
  listVBCollectionBySettlementId,
} from "@/api/finance/billCollection/billCollection";

export default {
  name: "ColPageToOne",
  components: {
    collectionStatementList,
    collectionListTable
  },
  data() {
    return {

      // 作弊码：从localStorage中获取是否处于开发模式，值为true或false
      isInDevMode: localStorage.getItem('isInDevMode') === 'true',


      // 左侧点击的哪个组件
      selectedComponentName: "",
      // 左侧点击的哪一行，基本是settlement或者statement的jsonObject
      selectedRow: {},
      // 用于右侧显示的收款明细
      collectionList: [],
      
      collectionListLoading: false,

      // 右侧宽度
      rightColWidth: 0,


    };


  },
  created() {
  },
  mounted() {
    // 获取id为rightCol的元素的宽度，用于给el-card设置宽度
    this.rightColWidth = document.querySelector('#rightCol').offsetWidth;
  },
  methods: {

    // 左侧上方子组件(收款对账单)的el-table被点击，
    async handleStatementListRowClick(row) {
      if (row){
        // 左侧点击的哪个组件
        this.selectedComponentName = "collectionStatementList";
        // 点击的row数据
        this.selectedRow = row;
        this.collectionList = [];
        this.collectionListLoading = true;
        // 根据点击的row数据中的statementId，获取右侧的收款明细，填入this.collectionList
        await listVBCollectionByStatementId(row.billStatementId).then(response => {
          this.collectionList = response.data;
          this.collectionListLoading = false;
        });
      }else{
        this.collectionList = []
      }

    },
    // 对左侧下方子组件(结算单)的el-table被点击
    handleSettlementListRowClick(row) {
      // 左侧点击的哪个组件
      this.selectedComponentName = "collectionSettlementList";
      // 点击的row数据
      this.selectedRow = row;
      // 根据点击的row数据中的settlementId，获取右侧的收款明细，填入this.collectionList
      listVBCollectionBySettlementId(row.billSettlementId).then(response => {
        this.collectionList = response.data;
      });
    },

    // 结算单生成对账单之后，需要刷新对账单列表，让其重新获取数据
    handleRefreshCollectionSettlementList() {
      this.$refs.collectionSettlementList.getCollectionSettlementList();
    },
    
    resetSelectedRow() {
      this.selectedComponentName = "";
      this.selectedRow = {};
      this.collectionList = [];
    }

  },


};

</script>

<style>



</style>

